<template>
	<view class="xmxq-page">
		<view class="title1"> {{ name }} 
			<view class="back" @click="back"></view>
		</view>
		<view class="list1-box">
			<view class="list1-item" v-for="(item, index) in list1" :key="index">
				<view class="title-box">
					<u--image :showLoading="true" :src="item.icon" width="40rpx" height="40rpx"></u--image>
					<view class="title">{{ item.title }}</view>
				</view>
				<view class="value">
					{{ item.value }}
				</view>
			</view>
		</view>
		<view class="carditem" style="height: 560rpx">
			<l-echart ref="chartRef" @finished="echartinit"></l-echart>
		</view>
		<view style="height: 46rpx;">

		</view>
		<banzu ref="banzu"></banzu>
		<view style="height: 46rpx;">

		</view>
		<warn ref="warn"></warn>
		<view style="height: 46rpx;">

		</view>
		<bar ref="bar"></bar>
		<view style="height: 60rpx"></view>
	</view>
</template>

<script>
import icon1 from "@/static/xmxq/icon1.png";
import icon2 from "@/static/xmxq/icon2.png";
import icon3 from "@/static/xmxq/icon6.png";
import icon4 from "@/static/xmxq/icon4.png";
import icon5 from "@/static/xmxq/icon5.png";
import icon6 from "@/static/xmxq/icon6.png";
import * as echarts from "@/uni_modules/lime-echart/static/echarts.min";
import banzu from "./components/banzu.vue"
import warn from "./components/warn.vue"
import bar from "./components/bar.vue"
import { getProjectStatic, getTypeWorkerStatic } from "@/api/index";
export default {
	components: {
		banzu,
		warn,
		bar
	},
	data() {
		return {
			projectId: "",
			name: "",
			list1: [{
				icon: icon1,
				title: "工人总数",
				value: "0",
				key: "workerNum"

			},
			{
				icon: icon2,
				title: "参建单位总数",
				value: "0",
				key: "subcontractorNum"
			},
			{
				icon: icon3,
				title: "班组总数",
				value: "0",
				key: "teamNum"

			},
			{
				icon: icon4,
				title: "当前在场人数",
				value: "0",
				key: "attendeesNum"
			},
			{
				icon: icon5,
				title: "危险源数量",
				value: "0",
				key: "dangerousNum"
			},
			{
				icon: icon6,
				title: "需充电安全帽",
				value: "0",
				key: "lowPowerNum"
			},
			],
		};
	},
	onLoad(query) {
		this.projectId = query.id;
		this.name = query.name
		// this.init();

	},
	mounted() {
		this.init()
	},
	methods: {
		async init() {

			this.$refs.bar.init(this.projectId)
			let res = await getProjectStatic({ projectId: this.projectId });
			this.list1.forEach(item => {
				item.value = res.data[item.key]
			})
			this.$refs.banzu.init(this.projectId)
			this.$refs.warn.init(this.projectId)

		},
		back(){
			uni.navigateBack({
				delta: 1
			})

		},
		async echartinit() {
			let { data } = await getTypeWorkerStatic({ projectId: this.projectId });


			var option = {
				color: ["#FF985F", "#FF797E", "#72DFFF", "#3E8FFF"],
				// backgroundColor: "#000",
				title: {
					text: "工种分布",
					left: "left",
					top: 17,
					left: 17,
					textStyle: {
						color: "#fff",
						fontSize: '18',
						fontWeight: 'bold'
					},
				},
				tooltip: {
					trigger: "item",
					formatter(params) {
						return `${params.name}:${params.value}人`;
					},
					backgroundColor: "#004AB0", // 背景色
					textStyle: {
						color: "#fff"
					}, // 文字颜色
					z: 200,
				},
				graphic: [{
					type: "text",
					left: "center", // 水平居中
					top: "center", // 垂直居中
					style: {
						text: data.length == 0 ? '' : `${data[0].typeDesc}\n${data[0].ratio}%`,
						textAlign: "center", // 水平居中
						textBaseline: "middle", // 垂直居中
						fill: "#fff",
						fontSize: 18,
						lineHeight: 30,
					},
					z: 200,
				},],
				legend: {
					bottom: "10",
					left: "center",
					textStyle: {
						// 文字颜色为白色
						color: "#fff",
					},
					icon: "circle", // 核心修改：设置图标为圆形
					itemWidth: 12, // 圆的直径（宽度）
					itemHeight: 12, // 圆的直径（高度）
					itemGap: 20, // 图标与文本之间的间距
					type: 'scroll',
					width: '100%',

					pageIconColor: 'white', // 分页按钮的默认颜色（当前页）
					pageIconInactiveColor: '#888', // 非当前页分页按钮的颜色
					pageTextStyle: {
						color: 'white' // 分页文本颜色
					},
					width: '90%',
				},
				series: [{
					type: "pie",
					radius: ["40%", "60%"],
					data: data.map(item => {
						return {
							value: item.number,
							name: item.typeDesc,
						}
					}),
					label: {
						show: false
					},
				},],
			};

			// chart 图表实例不能存在data里
			const myChart = await this.$refs.chartRef.init(echarts);
			myChart.setOption(option);
			// 触发图例选中动作（确保状态同步）
			//   myChart.dispatchAction({
			//     type: "highlight",
			//     seriesIndex: 0,
			//     dataIndex: 0,
			//   });

			// 初始渲染
			// 鼠标悬停更新中间文字
			myChart.on("mouseover", function (params) {
				if (params.componentType === "series") {
					console.log(params, "params");
					myChart.setOption({
						graphic: [{
							type: "text",
							left: "center", // 水平居中
							top: "center", // 垂直居中
							style: {
								text: `${params.name}\n${params.percent}%`,
								textAlign: "center", // 水平居中
								textBaseline: "middle", // 垂直居中
								fill: "#fff",
								fontSize: 18,
								lineHeight: 30,
							},
							z: 200,
						},],
					});
				}
			});
		},
	},
};
</script>

<style>
page {
	background: #1a2b4d;
}
</style>
<style lang="scss" scoped>
.xmxq-page {
	.title1 {
		box-sizing: border-box;
		height: 384rpx;
		background-image: url("@/static/xmxq/bj1.png");
		background-size: 100%;
		background-repeat: no-repeat;
		color: #fff;
		font-size: 40rpx;
		font-weight: bold;
		display: flex;
		align-items: flex-end;
		padding: 64rpx 32rpx;
		position: relative;
		.back {
			position: absolute;
			left: 32rpx;
			top: 32rpx;
			width: 100rpx;
			height: 100rpx;
			// background: #000;
		}
	}

	.list1-box {
		padding: 32rpx;
		padding-bottom: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.list1-item {
			padding: 0 32rpx;
			width: 327rpx;
			height: 184rpx;
			color: #fff;
			border-radius: 12px;
			background: linear-gradient(0deg,
					rgba(0, 0, 0, 0.001),
					rgba(0, 0, 0, 0.001)),
				rgba(255, 255, 255, 0.08);
			box-sizing: border-box;
			border: 1px solid rgba(255, 255, 255, 0.1);
			backdrop-filter: blur(20px);
			box-shadow: 0px 0px 20px 0px rgba(49, 210, 242, 0.15);
			margin-bottom: 32rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.title-box {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				line-height: 40rpx;
				color: #e5e7eb;

				.title {
					padding-left: 16rpx;
				}
			}

			.value {
				font-size: 48rpx;
				font-weight: bold;
				line-height: 64rpx;
				color: #fff;
			}
		}
	}
}

.carditem {
	margin: 0 32rpx;
	color: #fff;
	border-radius: 12px;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)),
		rgba(255, 255, 255, 0.08);
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(20px);
	box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.2);
}
</style>